<template>
	<view class="content">
		<tabs-conts @clickHead="clickHead" @scanCode="scanCode" @changIndex="changIndex" @changeToken="changeToken"
			@clickArea="clickArea" :cindex="dom_page.swiper_index" :city="dom_page.city" :token="token"></tabs-conts>
		<my-self :show="self_show" @change_show="change_show" :userInfo="userInfo"></my-self>
		<view class="map" id="map" @touchstart="clickMap" :style="'height:'+ mapHeight + 'vh;'">
			<map id="con_map" :latitude="map_page.latitude" :longitude="map_page.longitude" @regionchange="bindupdated"
				:enable-traffic="traffic" show-location></map>
			<view class="location">
				<view class="shuxian"></view>
				<view class="text_toast t_size_26" id="text_toast">
					<view>
						{{dom_page.text_toast}}
					</view>
				</view>
			</view>
			<view class="notice">
				<view class="row">
					<view class="col-3 t_center">
						<image src="../../static/index/notice_logo.png" mode="heightFix"></image>
					</view>
					<view class="col-20 t_left t_size_24">
						<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000"
							vertical="true" circular="true">
							<swiper-item>
								<view class="swiper-item">双十一出行日百万补贴优惠券等您来体验</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item">元旦周年庆,打车钜惠大补帖</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<view class="mask">
			<swiper :class="'swiper' + dom_page.swiper_index" :indicator-dots="false" :autoplay="false" :interval="200"
				:duration="200" :current="dom_page.swiper_index" @change="swiper_change">
				<swiper-item>
					<view class="swiper-item item_01">
						<view class="item_text">
							<view class="security">
								<view class="row">
									<view class="col-7 security_title">
										<view class="row" @click="$public.navTo('public/security')">
											<view class="col-8 t_center">
												<image src="../../static/index/security.png" mode="heightFix"></image>
											</view>
											<view class="col-16 t_left t_size_26">
												安全中心
											</view>
										</view>
									</view>
									<view class="col-17 t_right">
										<image src="../../static/index/location.png" @click="reset_map()"
											mode="heightFix">
										</image>
									</view>
								</view>
							</view>
							<view class="trip" v-if="userInfo.isOrderInside != 0 && userInfo.isNotPayOrderId == 0">
								<view class="row">
									<view class="col-19 t_size_26 t_size_bold">
										您有一个进行中的行程
									</view>
									<view class="col-5 t_center t_size_26" @click="$public.navTo('index/status?orderId=' + userInfo.isOrderInside)">
										查看
									</view>
								</view>
							</view>
							<view :class="userInfo.isOrderInside != 0 && userInfo.isNotPayOrderId == 0 ? 'setout' : 'setout_none'">
								<view :class="dom_page.recommend == true ? 'top' : 'top_c' ">
									<!-- <view class="top"> -->
									<view class="row">
										<view class="col-2 t_center">
											·
										</view>
										<view class="col-22 t_title" @click="goSelectStart(0)">
											<view class="title_begin t_size_33 t_size_bold">
												{{dom_page.text_toast}}
											</view>
											<view class="title_reco t_size_26" v-if="dom_page.recommend">
												推荐上车点
											</view>
										</view>
									</view>
								</view>
								<view class="bottom">
									<view class="row">
										<view class="col-2 t_center">
											·
										</view>
										<block>
											<view class="col-22 t_size_32 t_size_bold"
												@click="$public.navTo('public/select_area?type=0&region_fix=1')">
												{{overObject.title}}
											</view>
										</block>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="item_text">
							<view class="security">
								<view class="row">
									<view class="col-7 security_title">
										<view class="row" @click="$public.navTo('public/security')">
											<view class="col-8 t_center">
												<image src="../../static/index/security.png" mode="heightFix"></image>
											</view>
											<view class="col-16 t_left t_size_26">
												安全中心
											</view>
										</view>
									</view>
									<view class="col-17 t_right">
										<image src="../../static/index/location.png" @click="reset_map()"
											mode="heightFix">
										</image>
									</view>
								</view>
							</view>
							<view class="trip" v-if="userInfo.isOrderInside != 0 && userInfo.isNotPayOrderId == 0">
								<view class="row">
									<view class="col-19 t_size_26 t_size_bold">
										您有一个进行中的行程
									</view>
									<view class="col-5 t_center t_size_26" @click="$public.navTo('index/status?orderId=' + userInfo.isOrderInside)">
										查看
									</view>
								</view>
							</view>
							<view :class="userInfo.isOrderInside != 0 && userInfo.isNotPayOrderId == 0 ? 'setout' : 'setout_none'">
								<view class="status">
									<view class="row t_size_26">
										<view class="col-5 pdl-7" @click="dom_page.timeStatus = 1">
											<text :class="dom_page.timeStatus == 1 ? 'active' : ''">现在</text>
										</view>
										<view class="col-5 pdr-7 t_right" @click="dom_page.timeStatus = 2">
											<text :class="dom_page.timeStatus == 1 ? '' : 'active'">预约</text>
										</view>
									</view>
								</view>
								<view class="bottom bottom_bord time" v-if="dom_page.timeStatus == 2">
									<view class="row">
										<view class="col-2 t_center">
											·
										</view>
										<block>
											<view class="col-22 t_size_32 t_size_bold" @click="dom_page.visible=true">
												{{dom_page.timeText}}
											</view>
										</block>
									</view>
								</view>
								<view class="bottom_bord" :class="dom_page.recommend == true ? 'top' : 'top_c' ">
									<view class="row">
										<view class="col-2 t_center">
											·
										</view>
										<view class="col-22 t_title" @click="goSelectStart(1)">
											<view class="title_begin t_size_33 t_size_bold">
												{{dom_page.text_toast}}
											</view>
											<view class="title_reco t_size_26" v-if="dom_page.recommend">
												推荐上车点
											</view>
										</view>
									</view>
								</view>
								<view class="bottom">
									<view class="row">
										<view class="col-2 t_center">
											·
										</view>
										<block>
											<view class="col-22 t_size_32 t_size_bold" @click="goSelectStart(3)">
												{{oberobjectSn.title}}
											</view>
										</block>
									</view>
								</view>
							</view>
							<view class="row address">
								<view class="col-11">
									<view class="title_bg" @click="quickBy(5)">
										<view class="bg_title t_size_28">
											<block v-if="userInfo.isSetUserAddressHome == 0">
												家
											</block>
											<block v-else>
												{{userInfo.userAddressHome.name}}
											</block>
										</view>
										<view class="bg_desc t_size_24">
											<block v-if="userInfo.isSetUserAddressHome == 0">
												设置家的地址
											</block>
											<block v-else>
												一键回家
											</block>
										</view>
									</view>
									<view class="img_bg">
										<image src="../../static/index/home_bg.png" mode="scaleToFill"></image>
									</view>
								</view>
								<view class="col-11">
									<view class="title_bg" @click="quickBy(6)">
										<view class="bg_title t_size_28">
											<block v-if="userInfo.isSetUserAddressCompany == 0">
												公司
											</block>
											<block v-else>
												{{userInfo.userAddressCompany.name}}
											</block>
										</view>
										<view class="bg_desc t_size_24">
											<block v-if="userInfo.isSetUserAddressCompany == 0">
												设置公司的地址
											</block>
											<block v-else>
												一键去公司
											</block>
										</view>
									</view>
									<view class="img_bg">
										<image src="../../static/index/company_bg.png" mode="scaleToFill"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view :class="dom_page.giftbag == 1 ? 'giftbag' : 'giftbag_active'">
			<view class="row">
				<view class="col-24 t_center w_img">
					<image src="../../static/index/giftbag.png" mode="widthFix"></image>
				</view>
				<view class="col-24 t_center h_img">
					<image src="../../static/index/close.png" mode="heightFix" @click="dom_page.giftbag = 2"></image>
				</view>
			</view>
		</view>
		<view :class="userInfo.isNotPayOrderId == 0 ? 'waitPay_active' : 'waitPay'">
			<view class="row detail">
				<view class="col-22 off-1 set-1">
					<view class="row totle">
						<view class="col-22 t_center t_size_33 d_title">
							待支付订单
						</view>
						<view class="col-2 t_right d_img" @click="userInfo.isNotPayOrderId = -1">
							<image src="../../static/index/close_icon.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="centent row">
						<view class="c_totle t_center t_size_bold col-24">
							您有一笔待支付的订单
						</view>
						<view class="c_desc t_center col-24">
							你有一笔订单为支付，请支付后再叫车吧。
						</view>
					</view>
					<view class="b_btn row">
						<view class="col-24">
							<button type="primary" class="t_size_31"
								@click="$public.navTo('index/status?orderId=' + userInfo.isNotPayOrderId)">去支付</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<select-timer :visible="dom_page.visible" @change="time_change" @close="timeClose" :type="1"></select-timer>
	</view>
</template>

<script>
	import tabs_conts from '@/components/index/tabs_conts.vue';
	import my_self from '@/components/index/my_self.vue'
	import select_timer from '@/components/select-timer/select-timer.vue'
	const QQMapWX = require('../../common/js/qqmap-wx-jssdk.min.js');
	var qqmask;
	import {
		mapState
	} from 'vuex';
	export default {
		computed: mapState(['traffic','waitOrder']),
		components: {
			"my-self": my_self,
			"select-timer": select_timer,
			"tabs-conts": tabs_conts
		},
		data() {
			return {
				mapHeight: 75,
				map_page: {
					latitude: 34.75381,
					longitude: 113.67739,
					c_latitude: 34.75381,
					c_longitude: 113.67739
				},
				dom_page: {
					recommend: true,
					text_toast: '',
					city: '郑州市',
					giftbag: 0,
					waitPay: 0,
					swiper_index: 0,
					cityCode: 410100,
					adcode: 410110,
					timeStatus: 1,
					visible: false,
					timeText: '预约时间',
					sfxdztz: 0, //是不是已经选择完地址了 0 否 1是
				},
				overObject: {
					longitude: 0,
					latitude: 0,
					title: '您要去哪'
				},
				oberobjectSn: {
					longitude: 0,
					latitude: 0,
					title: '您要去哪'
				},
				self_show: false,
				token: uni.getStorageSync('token'),
				userInfo: {
					id: -1,
					telephone: "0",
					isSetUserAddressCompany: 0,
					isSetUserAddressHome: 0,
					isNotPayOrderId: 0, //是否有未支付的网约车订单，0暂无、有则返回订单ID ,
					isOrderInside: 0, //是否有正在进行中的网约车订单，0暂无、有则返回订单ID ,
					isOrderIntercity: 0, //是否有正在进行中的城际订单，0暂无、有则返回订单ID ,
					userAddressCompany: {
						cityCode: "",
						name: '',
						getOnLat: 0,
						getOnLon: 0
					},
					userAddressHome: {
						cityCode: "",
						getOnLat: '',
						getOnLon: '',
						name: ""
					}
				}
			}
		},
		onLoad() {
			uni.showLoading()
			qqmask = new QQMapWX({
				key: 'FFJBZ-32W6O-ZTPWU-S6G2B-AJB3Z-DKBV7'
			})
			this.get_location();
			this.socket();
		},
		async onShow() {
			this.token = uni.getStorageSync('token');
			this.getUserInfo();
			let that = this;
			//判断起点是否被选择过
			let location = uni.getStorageSync(`location${this.dom_page.swiper_index}`);
			if (location) {
				this.dom_page.text_toast = location.title;
				this.dom_page.recommend = false;
				this.dom_page.cityCode = location.cityCode;
				this.dom_page.adcode = location.adcode;
				this.map_page.latitude = location.latitude;
				this.map_page.longitude = location.longitude;
				this.map_page.c_latitude = location.latitude;
				this.map_page.c_longitude = location.longitude;
				uni.removeStorageSync(`location${this.dom_page.swiper_index}`)
			}
			let overLoaction = uni.getStorageSync('location2');
			if (overLoaction) {
				this.overObject = overLoaction;
				uni.removeStorage({
					key: 'location2',
					success(res) {
						let startOver = {
							start: {
								title: that.dom_page.text_toast,
								latitude: that.map_page.latitude,
								longitude: that.map_page.longitude,
								cityCode: that.dom_page.cityCode,
								adcode: that.dom_page.adcode
							},
							over: overLoaction
						}
						uni.setStorage({
							data: startOver,
							key: 'startOver',
							success() {
								that.$public.navTo('trip/cj/sure_hit')
							}
						})
					}
				})
			}

			let overLoactionSn = uni.getStorageSync('location3');
			if (overLoactionSn) {
				this.oberobjectSn = overLoactionSn;
				var timeText = '';
				if (this.dom_page.timeStatus == 2) {
					if (this.dom_page.timeText.indexOf('今天') != -1) {
						let str = this.dom_page.timeText.replace('今天', '')
						let hours = Number(str.split('点')[0]);
						let minutes = Number(str.split('点')[1].split('分')[0]);
						timeText =
							`${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()} ${hours}:${minutes}:00`
					} else {
						let str = this.dom_page.timeText.split('点');
						let year = str[0].replace(str[0].substr(str[0].length - 2, 2), '');
						let hours = str[0].substr(str[0].length - 2, 2);
						let minutes = str[1].split('分')[0];
						timeText = `${year} ${hours}:${minutes}:00`
					}
				}else{
					timeText =
						`${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()} ${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`
				}
				uni.removeStorage({
					key: 'location3',
					async success() {
						let timeN = 0;
						if(that.dom_page.text_toast == ''){
							timeN = 500;
							uni.showLoading()
							that.get_location_text(that.map_page.longitude, that.map_page.latitude);
							uni.hideLoading();
						}
						setTimeout(()=>{
							let startOverSn = {
								start: {
									title: that.dom_page.text_toast,
									latitude: that.map_page.latitude,
									longitude: that.map_page.longitude,
									cityCode: that.dom_page.cityCode,
									adcode: that.dom_page.adcode
								},
								over: overLoactionSn,
								status: {
									is: that.dom_page.timeStatus,
									time: timeText
								}
							}
							let objPage = {}
							objPage.startCityCode = startOverSn.start.cityCode;
							objPage.startCityAreaCode = startOverSn.start.adcode;
							objPage.getOnLat = startOverSn.start.latitude;
							objPage.getOnLon = startOverSn.start.longitude;
							objPage.getOnPoint = startOverSn.start.title;
							objPage.endCityCode = startOverSn.over.cityCode;
							objPage.endCityAreaCode = startOverSn.over.adcode;
							objPage.getOffLat = startOverSn.over.latitude;
							objPage.getOffLon = startOverSn.over.longitude;
							objPage.getOffPoint = startOverSn.over.title;
							objPage.departDatatime = startOverSn.status.time;
							objPage.isAppointment = startOverSn.status.is;
							objPage.orderFrom = 1;
							uni.hideLoading()
							that.placeOrder(objPage)
						},timeN)
					}
				})
			}
		},
		methods: {
			async getUserInfo() {
				if (this.token != '') {
					let res = await this.$api.request(this.$api.user.getinfo, {
						token: uni.getStorageSync('token')
					});
					if (res) {
						this.userInfo = res;
						uni.setStorageSync('userInfo', res)
					}
				}
			},
			//获取当前位置并设置地图中心点
			get_location() {
				let that = this;
				wx.getLocation({
					type: 'gcj02',
					success: (res) => {
						that.map_page.longitude = res.longitude;
						that.map_page.latitude = res.latitude;
						that.map_page.c_longitude = res.longitude;
						that.map_page.c_latitude = res.latitude;
						that.get_location_text(res.longitude, res.latitude)
					}
				})
				uni.hideLoading();
			},
			//点击地图触发
			clickMap() {
				this.dom_page.recommend = true;
			},
			//设置当前地图中心点地理位置title
			get_location_text(lo, la) {
				let that = this;
				qqmask.reverseGeocoder({
					location: {
						latitude: la,
						longitude: lo
					},
					get_poi: 0,
					poi_options: 'policy=3',
					success: async (result) => {
						let info = result.result.ad_info;
						let str = info.city_code.replace(info.nation_code, '');
						that.dom_page.cityCode = str;
						that.dom_page.adcode = info.adcode;
						that.dom_page.text_toast = result.result.formatted_addresses.recommend;
						that.dom_page.city = result.result.address_component.city;
						let res = await that.$api.request(that.$api.public.getCityIsOpen, {
							cityCode: str
						})
						if (res != 1 && that.dom_page.swiper_index == 0) {
							that.$public.showToast('该城市未开通城际线路')
						}
					}
				})
			},
			//地图移动绑定参数
			bindupdated({
				detail
			}) {
				if (this.dom_page.recommend) {
					if (detail.type == "begin") {
						this.dom_page.text_toast = '';
					} else {
						this.map_page.c_latitude = detail.centerLocation.latitude;
						this.map_page.c_longitude = detail.centerLocation.longitude;
						this.get_location_text(detail.centerLocation.longitude, detail.centerLocation.latitude);
					}
				}
			},
			//点击回到中心点图标重新绘制地图
			reset_map() {
				let that = this;
				wx.getLocation({
					type: 'gcj02',
					success: (res) => {
						let map = uni.createMapContext('con_map');
						map.moveToLocation();
						that.map_page.longitude = res.longitude;
						that.map_page.latitude = res.latitude;
						that.map_page.c_longitude = res.longitude;
						that.map_page.c_latitude = res.latitude;
						that.dom_page.recommend = false;
						that.get_location_text(res.longitude, res.latitude)
					}
				})
			},
			// 点击右上角头像回调函数
			clickHead(e) {
				this.self_show = !this.self_show;
			},
			// 城际选择起点地址
			goSelectStart(e) {
				this.$public.navTo(
					`public/select_by?region_fix=1&type=${e}&text=${this.dom_page.city}&recommend=${this.dom_page.recommend}&mapObject=${JSON.stringify(this.map_page)}`
				)
			},
			//点击左上角扫一扫图标回调函数
			scanCode(e) {
				if (e.errMsg == "scanCode:ok") {
					// console.log(e.result)
				}
			},
			// 点击个人中心灰色区域回调函数
			change_show(e) {
				this.self_show = false;
			},
			//swiper
			swiper_change({
				detail
			}) {
				this.dom_page.swiper_index = detail.current;
				this.mapHeight = this.dom_page.swiper_index == 0 ? 75 : 60;
			},
			//监听头部组件点击导航
			changIndex(e) {
				this.dom_page.swiper_index = e;
			},
			//监听第一次绑定
			changeToken(e) {
				if (e == undefined) {
					return
				}
				let that = this;
				that.token = e;
				uni.setStorageSync('token', e)
				this.getUserInfo();
				setTimeout(() => {
					that.self_show = true;
				}, 100)
			},
			//监听预约时间变化
			time_change(e) {
				this.dom_page.timeText = `${e.day} ${e.hour}点 ${e.minutes}分`;
				this.dom_page.visible = false;
			},
			//监听预约时间取消
			timeClose() {
				this.dom_page.visible = false;
			},
			async placeOrder(objPage) {
				let res = await this.$api.request(this.$api.order.subInsideOrder, objPage);
				if (res.orderId) {
					this.$public.navTo('index/status?orderId=' + res.orderId);
				}else{
					this.$public.showToast('请先完成之前的订单后，再下单')
				}
			},
			quickBy(e) {
				let objPage = {
					departDatatime: `${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()} ${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`,
					getOnPoint: this.dom_page.text_toast,
					getOnLat: this.map_page.latitude,
					getOnLon: this.map_page.longitude,
					startCityCode: this.dom_page.cityCode,
					startCityAreaCode: this.dom_page.adcode,
					isAppointment: 1,
					orderFrom: 1
				}
				if (e == 5) {
					if (this.userInfo.isSetUserAddressHome == 0) {
						this.$public.navTo('public/select_by?type=' + e);
						return
					} else {
						objPage.endCityCode = this.userInfo.userAddressHome.cityCode;
						objPage.endCityAreaCode = Number(this.userInfo.userAddressHome.cityCode);
						objPage.getOffPoint = this.userInfo.userAddressHome.name;
						objPage.getOffLat = this.userInfo.userAddressHome.getOnLat;
						objPage.getOffLon = this.userInfo.userAddressHome.getOnLon;
					}
				} else {
					if (this.userInfo.isSetUserAddressCompany == 0) {
						this.$public.navTo('public/select_by?type=' + e);
						return
					} else {
						objPage.endCityCode = this.userInfo.userAddressCompany.cityCode;
						objPage.endCityAreaCode = Number(this.userInfo.userAddressCompany.cityCode);
						objPage.getOffPoint = this.userInfo.userAddressCompany.name;
						objPage.getOffLat = this.userInfo.userAddressCompany.getOnLat;
						objPage.getOffLon = this.userInfo.userAddressCompany.getOnLon;
					}
				}
				this.placeOrder(objPage);
			},
			socket(){
				let that = this;
				this.$socket.init();
				this.$socket.socketTask.onMessage((res)=>{
					// console.log(JSON.parse(res.data))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map {
		width: 100%;
		// height: 60vh;
		position: relative;

		map {
			width: 100%;
			height: 100%;
		}

		.location {
			width: 100%;
			position: absolute;
			top: 50%;
			text-align: center;

			.shuxian {
				width: 7rpx;
				height: 60rpx;
				background-color: #6CBF30;
				margin-left: calc((100%-1px)/2);
				position: absolute;
				bottom: 0;
			}

			.text_toast {
				display: inline-block;
				color: #FFFFFF;
				position: absolute;
				bottom: 60rpx;
				width: 100%;
				display: flex;
				justify-content: center;

				view {
					display: inline-block;
					background-color: #6CBF30;
					padding: 13rpx 21rpx;
					border-radius: 70rpx;
				}
			}
		}

		.notice {
			width: 92%;
			position: absolute;
			top: 20rpx;
			left: 4%;
			border-radius: 10px;
			height: 72rpx;
			line-height: 72rpx;
			background-color: #FFFFFF;

			.t_center {
				image {
					height: 60%;
					margin-top: 15%;
				}
			}

			.t_left {
				color: #B3B3B3;

				swiper {
					height: 72rpx !important;
					line-height: 72rpx;

					swiper-item {
						height: 72rpx !important;
						line-height: 72rpx;

						.swiper-item {
							width: 100%;
							height: 72rpx !important;
							line-height: 72rpx;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}

	.mask {
		width: 92%;
		position: fixed;
		left: 4%;
		bottom: 20rpx;

		.swiper0,
		.swiper1 {
			width: 100%;
			min-height: 796rpx;

			swiper-item {
				height: 100%;
				position: relative;

				.swiper-item {
					width: 100%;
					height: 100%;
					position: relative;

					.item_text {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;

						.xd_xq {
							width: 90%;
							padding: 0 5%;
							margin-bottom: 29rpx;
							box-shadow: 0px 15rpx 20rpx 0px #EDEDED;
							background-color: #FFFFFF;
							border-radius: 13rpx;

							.yysj {
								height: 96rpx;
								line-height: 96rpx;
								color: #333333;
								border-bottom: 1px solid #ededed;
							}

							.dydsq {
								padding-top: 61rpx;
								color: #333333;

								text {
									color: #FF2626;
									margin: 0 13rpx;
									font-size: 41rpx;
								}
							}

							.zlc {
								padding-top: 28rpx;
								color: #B3B3B3;
							}

							.bysyhq {
								height: 144rpx;
								line-height: 144rpx;
								color: #6CBF30;
							}
						}

						.xd_ts {
							line-height: 38rpx;

							image {
								height: 26rpx;
								margin-top: 6rpx;
							}

							color: #B3B3B3;

							text {
								color: #FFAE00;
							}
						}

						.xd_btn {
							width: 100%;
							padding: 40rpx 0;

							button {
								background-color: #6CBF30;
								height: 96rpx;
								line-height: 96rpx;
								border-radius: 48rpx;
							}
						}
					}
				}

				.item_01 {
					bottom: 160rpx;
				}
			}
		}

		.swiper0 {
			min-height: 445rpx;

			swiper-item {
				.item_01 {
					bottom: 0;
				}
			}

		}

		.security {
			width: 100%;
			height: 64rpx;
			line-height: 64rpx;
			margin-bottom: 21rpx;

			.security_title {
				background-color: #FFFFFF;
				border-radius: 32rpx;
				height: 64rpx;

				.t_center {
					margin-top: 12rpx;
					height: 40rpx;

					image {
						height: 100%;
					}
				}

				.t_left {
					color: #333333;
				}
			}

			.t_right {
				image {
					height: 64rpx;
				}
			}
		}

		.trip {
			width: 90%;
			padding: 0 5%;
			height: 76rpx;
			border-radius: 15rpx 15rpx 0 0;
			background-color: #F0F9E9;
			color: #6CBF30;

			.col-19 {
				line-height: 76rpx;
			}

			.col-5 {
				height: 50rpx;
				line-height: 50rpx;
				margin-top: 13rpx;
				border-radius: 30rpx;
				color: #FFFFFF;
				background-color: #6CBF30;
			}
		}

		.setout,
		.setout_none{
			width: 90%;
			padding: 0 5%;
			min-height: 240rpx;
			background-color: #FFFFFF;
			margin-bottom: 30rpx;
			box-shadow: 0px 15px 20px 0px #EDEDED;
			border-radius: 0 0 15rpx 15rpx;

			.status {
				height: 50rpx;
				line-height: 50rpx;
				padding: 20rpx 0;
				color: #999999;

				text {
					padding: 7rpx 23rpx;
					border-radius: 35rpx;
					border: 1px solid #999999;
				}

				.active {
					color: #6CBF30;
					border-color: #6CBF30;
				}
			}

			.time {
				.t_center {
					color: #FFAE00;
				}
			}

			.top,
			.top_c {
				height: 120rpx;

				.t_title {
					height: 90rpx;
					padding: 15rpx 0;

					.title_begin {
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						height: 50rpx;
						line-height: 50rpx;
					}

					.title_reco {
						height: 40rpx;
						line-height: 40rpx;
						color: #6CBF30;
					}
				}

				.t_center {
					color: #6CBF30;
				}
			}

			.top_c {
				line-height: 120rpx;

				.t_center {
					font-size: 39rpx;
					font-weight: bold;
				}

				.t_title {
					.title_begin {
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						height: 90rpx;
						line-height: 90rpx;
					}
				}

			}

			.bottom {
				height: 120rpx;
				line-height: 120rpx;

				.t_center {
					color: rgb(7, 176, 255);
				}
			}

			.top,
			.bottom {
				.t_center {
					line-height: 120rpx;
					font-size: 39rpx;
					font-weight: bold;
				}
			}

			.bottom_bord {
				border-bottom: 1px solid #f5f5f5;
			}
		}
		
		.setout_none{
			border-radius: 15rpx;
		}

		.address {
			justify-content: space-between;

			.col-11 {
				position: relative;
				height: 155rpx;

				.img_bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 155rpx;
					z-index: 1;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.title_bg {
					width: 90%;
					height: 95rpx;
					padding: 30rpx 5%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;

					.bg_title {
						color: #333333;
						font-weight: bold;
						overflow: hidden;
						height: 60rpx;
						line-height: 60rpx;
					}

					.bg_desc {
						color: #999999;
						height: 40rpx;
						line-height: 40rpx;
					}
				}
			}
		}
	}

	.giftbag,
	.giftbag_active {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 4;
		transition-duration: 0.2s;
		/*     以下三值为默认值，稍后会详细介绍 */
		transition-property: all;
		transition-timing-function: ease;
		transition-delay: 0s;

		.row {
			padding-top: 250rpx;

			.w_img {
				image {
					width: 80%;
				}
			}

			.h_img {
				image {
					height: 150rpx;
				}
			}
		}
	}

	.giftbag_active {
		top: 110vh;
	}

	.waitPay,
	.waitPay_active {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		transition-duration: 0.2s;
		/*     以下三值为默认值，稍后会详细介绍 */
		transition-property: all;
		transition-timing-function: ease;
		transition-delay: 0s;

		.detail {
			width: 100%;
			height: 435rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			border-radius: 27rpx 27rpx 0 0;
			background-color: #FFFFFF;

			.totle {
				height: 95rpx;
				line-height: 95rpx;

				.d_title {
					text-indent: 3em;
					font-weight: 500;
					color: #333333;
				}

				.d_img {
					image {
						width: 35rpx;
						margin-top: 30rpx;
					}
				}
			}

			.centent {
				.c_totle {
					margin-top: 55rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #333333;
				}

				.c_desc {
					margin-bottom: 55rpx;
					height: 50rpx;
					line-height: 50rpx;
					color: #999999;
				}
			}

			.b_btn {
				height: 100rpx;

				button {
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 40rpx;
					background-color: #6CBF30;
				}
			}
		}
	}

	.waitPay_active {
		top: 110vh;
	}

</style>
